﻿@model IEnumerable<Hrm.Core.Service>
@{
    ViewBag.Title = "Service";
}

<div id="content">
    <section id="topbar">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h1>我们的服务</h1>
                </div>
                <div class="col-md-6 text-right">
                    <ul class="breadcrumb">
                        <li>
                            <a href="@Url.Action("Index")">首页</a>
                        </li>
                        <li class="active">服务</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section class="services-preview white-bg mt20">
        <div class="container">
            <div class="row service-panel style1">
                @foreach (var item in Model)
                {
                    <div class="col-md-4">
                        <div class="service-panel-heading">
                            <i class="@item.Glyphicon"></i>
                            <h4>@item.Name</h4>
                        </div>
                        <div class="service-panel-content">
                            <p>@item.Description</p>
                        </div>
                    </div>
                }
            </div>
        </div>
    </section>
    <!-- / SECTION END -->
    <!-- SECTION START -->
    <section class="services-preview gray-lighter-bg">
        <div class="container">
            <!-- .container -->
            <div class="row">
                <!-- .row start -->
                <div class="heading mt30 mb30 text-center">
                    <h3>Pricing</h3>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6">
                    <!-- col-lg-3 start here -->
                    <div class="pricing-table">
                        <div class="pricing-header">
                            <h3>Ultimate</h3>
                        </div>
                        <ul class="list-group">
                            <li class="list-group-item"><i class="glyphicon glyphicon-transfer s24"></i> 15 GB, MySQL SSD</li>
                            <li class="list-group-item"><i class="glyphicon glyphicon-floppy-disk s24"></i> 150 GB</li>
                            <li class="list-group-item off"><i class="glyphicon glyphicon-gift s24"></i> Free domain</li>
                            <li class="list-group-item"><i class="glyphicon glyphicon-retweet s24"></i> Daily backup</li>
                            <li class="list-group-item"><i class="glyphicon glyphicon-globe s24"></i> Cloudflare</li>
                            <li class="list-group-item"><i class="glyphicon glyphicon-search s24"></i> Seo</li>
                        </ul>
                        <div class="pricing-bottom clearfix">
                            <div class="price">
                                <span>5$</span>
                                / month
                                <a href="#" class="btn btn-danger btn-lg btn-block">Order now</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- col-lg-3 end here -->
                <div class="col-lg-3 col-md-3 col-sm-6">
                    <!-- col-lg-3 start here -->
                    <div class="pricing-table">
                        <div class="pricing-header">
                            <h3>Economic</h3>
                        </div>
                        <ul class="list-group">
                            <li class="list-group-item"><i class="glyphicon glyphicon-transfer s24"></i> 40 GB, MySQL SSD</li>
                            <li class="list-group-item"><i class="glyphicon glyphicon-floppy-disk s24"></i> Unlimited</li>
                            <li class="list-group-item"><i class="glyphicon glyphicon-gift s24"></i> Free domain</li>
                            <li class="list-group-item"><i class="glyphicon glyphicon-retweet s24"></i> Daily backup</li>
                            <li class="list-group-item"><i class="glyphicon glyphicon-globe s24"></i> Cloudflare</li>
                            <li class="list-group-item"><i class="glyphicon glyphicon-search s24"></i> Seo</li>
                        </ul>
                        <div class="pricing-bottom clearfix">
                            <div class="price">
                                <span>8$</span>
                                / month
                                <a href="#" class="btn btn-danger btn-lg btn-block">Order now</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- col-lg-3 end here -->
                <div class="col-lg-3 col-md-3 col-sm-6">
                    <!-- col-lg-3 start here -->
                    <div class="pricing-table">
                        <div class="pricing-header">
                            <h3>Business</h3>
                        </div>
                        <ul class="list-group">
                            <li class="list-group-item"><i class="glyphicon glyphicon-transfer s24"></i> 60 GB, MySQL SSD</li>
                            <li class="list-group-item"><i class="glyphicon glyphicon-floppy-disk s24"></i> Unlimited</li>
                            <li class="list-group-item"><i class="glyphicon glyphicon-gift s24"></i> Free domain</li>
                            <li class="list-group-item"><i class="glyphicon glyphicon-retweet s24"></i> Daily backup</li>
                            <li class="list-group-item"><i class="glyphicon glyphicon-globe s24"></i> Cloudflare</li>
                            <li class="list-group-item"><i class="glyphicon glyphicon-search s24"></i> Seo</li>
                        </ul>
                        <div class="pricing-bottom clearfix">
                            <div class="price">
                                <span>12$</span>
                                / month
                                <a href="#" class="btn btn-danger btn-lg btn-block">Order now</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- col-lg-3 end here -->
                <div class="col-lg-3 col-md-3 col-sm-6">
                    <!-- col-lg-3 start here -->
                    <div class="pricing-table">
                        <div class="pricing-header">
                            <h3>Extra</h3>
                        </div>
                        <ul class="list-group">
                            <li class="list-group-item"><i class="glyphicon glyphicon-transfer s24"></i> 160 GB, MySQL SSD</li>
                            <li class="list-group-item"><i class="glyphicon glyphicon-floppy-disk s24"></i> Unlimited</li>
                            <li class="list-group-item"><i class="glyphicon glyphicon-gift s24"></i> Free domain</li>
                            <li class="list-group-item"><i class="glyphicon glyphicon-retweet s24"></i> Daily backup</li>
                            <li class="list-group-item"><i class="glyphicon glyphicon-globe s24"></i> Cloudflare</li>
                            <li class="list-group-item"><i class="glyphicon glyphicon-search s24"></i>1 year Seo</li>
                        </ul>
                        <div class="pricing-bottom clearfix">
                            <div class="price">
                                <span>25$</span>
                                / month
                                <a href="#" class="btn btn-danger btn-lg btn-block">Order now</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- col-lg-3 end here -->
            </div>
            <!-- / .row -->
        </div>
        <!-- / .container -->
    </section>
    <!-- / SECTION END -->
</div>
<!-- / #content -->

@section JavascriptSection{
    
}